.spinner-wrapper{
    transition:all ease 0.4s;
    position:fixed;
    top:0;
    left:0;
    z-index:999;
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    align-items: center;
    background:#ffffffd0;
    .spinner {
        margin-right:10px;
       display: inline-block;
       width: 30px;
       height: 30px;
       border: 3px solid var(--theme-color);
       border-radius: 50%;
       border-top-color: transparent;
       animation: spin 1s linear infinite;
       -webkit-animation: spin 1s linear infinite;
    }
}
.spinner-wrapper.hide{
    opacity:0;
    visibility: hidden;
    transform: translateY(-2000px);
}

@keyframes spin {
to { 
   -webkit-transform: rotate(360deg);   }
}
@-webkit-keyframes spin {
to { 
   -webkit-transform: rotate(360deg);   }
}